<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="张拉" name="first"></el-tab-pane>
          <el-tab-pane label="压浆" name="second"></el-tab-pane>
        </el-tabs>

        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
          <el-button style="margin-right: 10px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
          <!-- <el-form-item label="项目名称" prop="deptId">
            <el-select clearable style="width: 150px;" v-model="queryParams.deptId" placeholder="请选择项目名称">
              <el-option v-for="item in deptList" :key="item.id" :label="item.label" :value="item.id.toString()"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="报警时间">
            <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
          </el-form-item>

          <el-form-item label="处置状态">
            <el-select v-model="queryParams.disposalStatus" clearable size="mini" placeholder="请选择">
              <el-option v-for="item in dict.type.warning_disposal_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['znzlyj:earlyWarning:query']">搜索</el-button>
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
        </el-form>

        <div v-if="activeName == 'first'" style="position: relative;">
          <el-button type="danger" class="deleteBtn" plain icon="el-icon-delete" size="mini" :disabled="multipleZl" @click="handleDeleteZl" v-hasPermi="['znzlyj:earlyWarning:remove']">删除</el-button>
          <el-table border v-loading="loading" :data="pageTensionList" size="mini" @selection-change="handleSelectionChangeZl">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="梁场名称" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
            <el-table-column label="设备名称" align="center" prop="instrumentManufacturer" min-width="200" show-overflow-tooltip />
            <el-table-column label="张拉梁型" align="center" prop="beamType" min-width="120" show-overflow-tooltip />
            <el-table-column label="梁号" align="center" prop="beamNo" min-width="90" show-overflow-tooltip />
            <el-table-column label="开始张拉时间" align="center" prop="tensionTime" width="170">
              <template slot-scope="scope"><span>{{ parseTime(scope.row.tensionTime) }}</span></template>
            </el-table-column>
            <el-table-column label="处置状态" align="center" prop="disposalStatus" min-width="90">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.warning_disposal_status" :value="scope.row.disposalStatus" />
              </template>
            </el-table-column>
            <el-table-column label="是否合格" align="center" prop="tensionStatus" min-width="90">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.tensionStatus == '1'" type="success">合格</el-tag>
                <el-tag v-else-if="scope.row.tensionStatus == '0'" type="danger">不合格</el-tag>
                <el-tag v-else type="info">未校验</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报警时间" align="center" prop="insterTime" width="135">
              <template slot-scope="scope"><span>{{ parseTime(scope.row.insterTime) }}</span></template>
            </el-table-column>
            <el-table-column label="报警信息" align="center" prop="remark" min-width="190" show-overflow-tooltip />
            <el-table-column label="发送状态" align="center" min-width="90" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == '0'" type="success">发送成功</el-tag>
                <el-tag v-else type="danger">发送失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="160">
              <template slot-scope="scope">
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2 || scope.row.disposalStatus == 5)" @click="handleDisposalZl(scope.row)" v-hasPermi="['znzlyj:earlyWarning:zlHandle']">处置</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="handleConfirmZl(scope.row)" v-hasPermi="['znzlyj:earlyWarning:zlConfirm']">确认</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="handleRevokeZl(scope.row)" v-hasPermi="['znzlyj:earlyWarning:zlWithdraw']">撤回</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus != 1)" @click="handleDetailsZl(scope.row)" v-hasPermi="['znzlyj:earlyWarning:zlDetails']">详情</el-button>
              </template>
            </el-table-column>
            <!--处置单dialog-->
            <disposal ref="disposalZl" :open="disposalVisibleZl" :warning-id="warningIdZl" :warning-type="warningTypeZl" @getList="getPageTension" @closeDialog="closeFormZl"></disposal>
            <!--确认单dialog-->
            <disposal-confirm ref="disposalConfirmZl" :open="disposalConfirmVisibleZl" @getList="getPageTension" @closeDialog="closeConfirmZl"></disposal-confirm>
            <!--详情dialog-->
            <disposal-confirm ref="disposalDetailsZl" :open="disposalDetailsVisibleZl" @getList="getPageTension" @closeDialog="closeDetailsZl"></disposal-confirm>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPageTension" />
        </div>

        <div v-else style="position: relative;">
          <el-button type="danger" class="deleteBtn" plain icon="el-icon-delete" size="mini" :disabled="multipleYj" @click="handleDeleteYj" v-hasPermi="['znzlyj:earlyWarning:remove']">删除</el-button>
          <el-table border v-loading="loading2" :data="pageGroutingList" size="mini" @selection-change="handleSelectionChangeYj">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="梁场名称" align="center" prop="deviceName" min-width="120" />
            <el-table-column label="设备名称" align="center" prop="instrumentManufacturer" min-width="200" show-overflow-tooltip />
            <el-table-column label="张拉梁型" align="center" prop="beamType" min-width="120" />
            <el-table-column label="梁号" align="center" prop="beamNumber" min-width="120" />
            <el-table-column label="桩号" align="center" prop="pileNumber" min-width="100" show-overflow-tooltip />
            <el-table-column label="处置状态" align="center" prop="disposalStatus" min-width="90">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.warning_disposal_status" :value="scope.row.disposalStatus" />
              </template>
            </el-table-column>
            <el-table-column label="是否合格" align="center" prop="groutingStatus" min-width="90">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.groutingStatus == '1'" type="success">合格</el-tag>
                <el-tag v-else-if="scope.row.groutingStatus == '0'" type="danger">不合格</el-tag>
                <el-tag v-else type="info">未校验</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报警时间" align="center" prop="insterTime" width="135">
              <template slot-scope="scope"><span>{{ parseTime(scope.row.insterTime) }}</span></template>
            </el-table-column>
            <el-table-column label="报警信息" align="center" prop="remark" min-width="190" show-overflow-tooltip />
            <el-table-column label="发送状态" align="center" min-width="90" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == '0'" type="success">发送成功</el-tag>
                <el-tag v-else type="danger">发送失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="160">
              <template slot-scope="scope">
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus &&  scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2 || scope.row.disposalStatus == 5)" @click="handleDisposalYj(scope.row)" v-hasPermi="['znzlyj:earlyWarning:yjHandle']">处置</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="handleConfirmYj(scope.row)" v-hasPermi="['znzlyj:earlyWarning:yjConfirm']">确认</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus == 3)" @click="handleRevokeYj(scope.row)" v-hasPermi="['znzlyj:earlyWarning:yjWithdraw']">撤回</el-button>
                <el-button size="mini" type="text" :disabled="!(scope.row.disposalStatus && scope.row.disposalStatus != 1)" @click="handleDetailsYj(scope.row)" v-hasPermi="['znzlyj:earlyWarning:yjDetails']">详情</el-button>
              </template>
            </el-table-column>
            <!--处置单dialog-->
            <disposal ref="disposalYj" :open="disposalVisibleYj" :warning-id="warningIdYj" :warning-type="warningTypeYj" @getList="getPageGrouting" @closeDialog="closeFormYj"></disposal>
            <!--确认单dialog-->
            <disposal-confirm ref="disposalConfirmYj" :open="disposalConfirmVisibleYj" @getList="getPageGrouting" @closeDialog="closeConfirmYj"></disposal-confirm>
            <!--详情dialog-->
            <disposal-confirm ref="disposalDetailsYj" :open="disposalDetailsVisibleYj" @getList="getPageGrouting" @closeDialog="closeDetailsYj"></disposal-confirm>
          </el-table>
          <pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getPageGrouting" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import workSiteLeft from "@/views/components/workSiteLeft";
import disposal from "@/views/zhgd/nWarningHnt/disposal";
import disposalConfirm from "@/views/zhgd/nWarningHnt/disposalConfirm";
// import { businessDeptTreeTop } from "@/api/common/common";
import deatetime from "@/components/Datetime";
import { pageTension, pageGrouting, remove } from "@/api/znzlyj/earlyWarning";
import { getInfoByWarningId, handleRevoke } from "@/api/zhgd/nWarningHnt";
import {delWarningDisposal} from "@/api/zhgd/warningDisposal";


export default {
  name: "earlyWarning",
  dicts: ["warning_disposal_status", 'warning_type'],
  data() {
    return {
      loading: false,
      loading2: false,
      activeName: 'first',
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      rowId: "",
      // 总条数
      total: 0,
      total2: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        disposalStatus: '',
      },
      deptList: [],
      pageTensionList: [],
      pageGroutingList: [],
      disposalVisibleZl: false,
      disposalVisibleYj: false,
      disposalConfirmVisibleZl: false,
      disposalConfirmVisibleYj: false,
      disposalDetailsVisibleZl: false,
      disposalDetailsVisibleYj: false,
      formZl: {
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      formYj: {
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      formConfirmZl: {
        warningId: null,
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      formConfirmYj: {
        warningId: null,
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      formDetailsZl: {
        warningId: null,
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      formDetailsYj: {
        warningId: null,
        disposalInstructions: null, // 处置说明
        imgUrl: null, // 图片
        fileUrl: null, // 附件
      },
      titleZl: '张拉处置说明单',
      titleYj: '压浆处置说明单',
      titleConfirmZl: '张拉处置确认单',
      titleConfirmYj: '压浆处置确认单',
      titleDetailsZl: '张拉处置详情单',
      titleDetailsYj: '压浆处置详情单',
      warningIdZl: null,
      warningIdYj: null,
      warningTypeZl: null,
      warningTypeYj: null,
      // 选中数组
      idsZl: [],
      // 非单个禁用
      singleZl: true,
      // 非多个禁用
      multipleZl: true,
      // 选中数组
      idsYj: [],
      // 非单个禁用
      singleYj: true,
      // 非多个禁用
      multipleYj: true,
    };
  },
  components: {
    workSiteLeft,
    deatetime,
    disposal,
    disposalConfirm
  },
  created() {
    // 接收首页跳转传过来的参数
    if (!!this.$route.query.disposalStatus) {
      this.queryParams.disposalStatus = this.$route.query.disposalStatus
    }
    if (!!this.$route.query.activeNames) {
      this.activeName = this.$route.query.activeNames
    }
    // this.getBusinessDeptTreeTop()
    this.getPageTension();
    this.getPageGrouting();
  },
  methods: {
    // 项目名称
    // getBusinessDeptTreeTop() {
    //   businessDeptTreeTop().then((res) => {
    //     this.deptList = res.data
    //   })
    // },
    resetDisposalFormZl() {
      this.disposalVisibleZl = false
      this.warningIdZl = null
      this.disposalConfirmVisibleZl = false
      this.warningIdZl = null
      this.disposalDetailsVisibleZl = false
      this.warningIdZl = null
    },
    resetDisposalFormYj() {
      this.disposalVisibleYj = false
      this.warningIdYj = null
      this.disposalConfirmVisibleYj = false
      this.warningIdYj = null
      this.disposalDetailsVisibleYj = false
      this.warningIdYj = null
    },
    // 查询张拉预警消息列表
    getPageTension() {
      this.resetDisposalFormZl()
      this.loading = true
      pageTension(this.queryParams).then((res) => {
        this.pageTensionList = res.rows
        this.total = res.total;
        this.loading = false;
      })
    },
    // 查询压浆预警消息列表
    getPageGrouting() {
      this.resetDisposalFormYj()
      this.loading2 = false;
      pageGrouting(this.queryParams).then((res) => {
        this.pageGroutingList = res.rows
        this.total2 = res.total;
        this.loading2 = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.queryParams.pageNum = 1;
      this.activeName == 'first' ? this.getPageTension() : this.getPageGrouting()
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.$refs.workSiteLeft.resetQuery();
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.id = '';
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.queryParams.disposalStatus = "";
      this.disposalVisibleZl = false;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.id = val.id;
      this.handleQuery();
    },
    handleClick(tab, event) {
      this.resetQuery()
    },
    // 张拉处置
    handleDisposalZl(row) {
      this.disposalVisibleZl = true
      this.warningIdZl = row.id
      this.warningTypeZl = this.dict.type.warning_type[0].value
      this.$nextTick(() => {
        this.$refs.disposalZl.title = this.titleZl
        this.$refs.disposalZl.form.warningId = this.warningIdZl
        this.$refs.disposalZl.form.warningType = this.warningTypeZl
        this.$refs.disposalZl.getInfoByWarningId()
      })
    },
    // 张拉确认
    handleConfirmZl(row) {
      this.disposalConfirmVisibleZl = true
      this.warningIdZl = row.id
      this.warningTypeZl = this.dict.type.warning_type[0].value
      this.$nextTick(() => {
        this.$refs.disposalConfirmZl.title = this.titleConfirmZl
        this.$refs.disposalConfirmZl.form.warningId = this.warningIdZl
        this.$refs.disposalConfirmZl.form.warningType = this.warningTypeZl
        this.$refs.disposalConfirmZl.disabled = true
        this.$refs.disposalConfirmZl.getInfoByWarningId()
      })
    },
    // 张拉撤回
    handleRevokeZl(row) {
      this.$confirm('确认撤回？').then(_ => {
        // 调用撤回接口
        const params = {
          operation: '1',
          status: 2,
          warningType: this.dict.type.warning_type[0].value,
          warningId: row.id
        }
        handleRevoke(params).then(res => {
          this.$message.success("撤回成功")
          this.getPageTension()
        }).catch(error => { })
      })
        .catch(_ => { });
    },
    // 张拉详情
    handleDetailsZl(row) {
      this.disposalDetailsVisibleZl = true
      this.warningIdZl = row.id
      this.warningTypeZl = this.dict.type.warning_type[0].value
      this.$nextTick(() => {
        this.$refs.disposalDetailsZl.title = this.titleDetailsZl
        this.$refs.disposalDetailsZl.form.warningId = this.warningIdZl
        this.$refs.disposalDetailsZl.form.warningType = this.warningTypeZl
        this.$refs.disposalDetailsZl.disabled = true
        this.$refs.disposalDetailsZl.detailsDisabled = true
        this.$refs.disposalDetailsZl.details()
      })
    },
    // 压浆处置
    handleDisposalYj(row) {
      this.disposalVisibleYj = true
      this.warningIdYj = row.id
      this.warningTypeYj = this.dict.type.warning_type[1].value
      this.$nextTick(() => {
        this.$refs.disposalYj.title = this.titleYj
        this.$refs.disposalYj.form.warningId = this.warningIdYj
        this.$refs.disposalYj.form.warningType = this.warningTypeYj
        this.$refs.disposalYj.getInfoByWarningId()
      })
    },
    // 压浆确认
    handleConfirmYj(row) {
      this.disposalConfirmVisibleYj = true
      this.warningIdYj = row.id
      this.warningTypeYj = this.dict.type.warning_type[1].value
      this.$nextTick(() => {
        this.$refs.disposalConfirmYj.title = this.titleConfirmYj
        this.$refs.disposalConfirmYj.form.warningId = this.warningIdYj
        this.$refs.disposalConfirmYj.form.warningType = this.warningTypeYj
        this.$refs.disposalConfirmYj.disabled = true
        this.$refs.disposalConfirmYj.getInfoByWarningId()
      })
    },
    // 压浆撤回
    handleRevokeYj(row) {
      this.$confirm('确认撤回？').then(_ => {
        // 调用撤回接口
        const params = {
          operation: '1',
          status: 2,
          warningType: this.dict.type.warning_type[1].value,
          warningId: row.id
        }
        handleRevoke(params).then(res => {
          this.$message.success("撤回成功")
          this.getPageGrouting()
        }).catch(error => { })
      })
        .catch(_ => { });
    },
    // 压浆详情
    handleDetailsYj(row) {
      this.disposalDetailsVisibleYj = true
      this.warningIdYj = row.id
      this.warningTypeYj = this.dict.type.warning_type[1].value
      this.$nextTick(() => {
        this.$refs.disposalDetailsYj.title = this.titleDetailsYj
        this.$refs.disposalDetailsYj.form.warningId = this.warningIdYj
        this.$refs.disposalDetailsYj.form.warningType = this.warningTypeYj
        this.$refs.disposalDetailsYj.disabled = true
        this.$refs.disposalDetailsYj.detailsDisabled = true
        this.$refs.disposalDetailsYj.details()
      })
    },
    closeFormZl() {
      this.resetDisposalFormZl()
      this.$nextTick(() => {
        this.$refs['disposalZl'].$refs['form'].resetFields()
      })
    },
    closeConfirmZl() {
      this.resetDisposalFormZl()
      this.$nextTick(() => {
        this.$refs['disposalConfirmZl'].$refs['form'].resetFields()
      })
    },
    closeDetailsZl() {
      this.resetDisposalFormZl()
      this.$nextTick(() => {
        this.$refs['disposalDetailsZl'].$refs['form'].resetFields()
      })
    },
    closeFormYj() {
      this.resetDisposalFormYj()
      this.$nextTick(() => {
        this.$refs['disposalYj'].$refs['form'].resetFields()
      })
    },
    closeConfirmYj() {
      this.resetDisposalFormYj()
      this.$nextTick(() => {
        this.$refs['disposalConfirmYj'].$refs['form'].resetFields()
      })
    },
    closeDetailsYj() {
      this.resetDisposalFormYj()
      this.$nextTick(() => {
        this.$refs['disposalDetailsYj'].$refs['form'].resetFields()
      })
    },
    // 多选框选中数据
    handleSelectionChangeZl(selection) {
      this.idsZl = selection.map(item => item.id)
      this.singleZl = selection.length!==1
      this.multipleZl = !selection.length
    },
    /** 删除按钮操作 */
    handleDeleteZl(row) {
      const ids = row.id || this.idsZl;
      this.$modal.confirm('是否确认删除？').then(() => {
        this.loading = true;
        return remove(ids);
      }).then(() => {
        this.loading = false;
        this.getPageTension();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChangeYj(selection) {
      this.idsYj = selection.map(item => item.id)
      this.singleYj = selection.length!==1
      this.multipleYj = !selection.length
    },
    /** 删除按钮操作 */
    handleDeleteYj(row) {
      const ids = row.id || this.idsYj;
      this.$modal.confirm('确认删除吗？').then(() => {
        this.loading2 = true;
        return remove(ids);
      }).then(() => {
        this.loading2 = false;
        this.getPageGrouting();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading2 = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app-marshallData {
  // padding-top: 16px;
  // user-select: none;
  .chartBox {
    height: 350px;
    width: 100%;
    position: relative;
  }
  .chartBoxHeight {
    height: 400px;
    width: 100%;
    position: relative;
  }
  .chartSearch {
    position: absolute;
    top: 0px;
    right: 60px;
  }
}
.deleteBtn{
  position: absolute;
  right: 0px;
  top: -45px;
}
</style>
